<template>
	<h5>teleport使用</h5>
	<ModalButton @childMounted="handleChildMounted"></ModalButton>

	<h5>在同一目标上使用多个 teleport</h5>
	<div id="modals" class="modals">
	</div>
	<teleport to="#modals">
		<div>A</div>
	</teleport>
	<teleport to="#modals">
		<div>B</div>
	</teleport>

	<h5>hook使用</h5>
	<h5>在父组件监听子组件的生命周期方法</h5>
	<div>如果你站在父组件里想在子组件的mounted方法里边做一些事情你会怎么办呢？</div>
	<!-- vue2写法 -->
	<!-- <ModalButton @hook:mounted="handleChildMounted2"></ModalButton> -->
	<ModalButton @vnode-mounted="handleChildMounted2"></ModalButton>
</template>

<script>
	import {
		ref,
	} from 'vue'
	import ModalButton from '../components/ModalButton.vue'
	// import ModalButton from '@/src/components/ModalButton.vue'

	export default {
		setup() {
			return {

			}
		},
		components: {
			ModalButton
		},
		data() {
			return {}
		},
		mounted() {

		},
		methods: {
			handleChildMounted() {
				console.log('this.handleChildMounted=', '子组件的mounted执行了')
			},

			handleChildMounted2() {
				console.log('this.handleChildMounted2=', '子组件的mounted执行了')
			},

		},

	}
</script>

<style>
	.modals {
		background-color: gold;
		width: 40px;
		height: 60px;
	}
</style>
